<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>异步组件</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="root"></div>

    <script>
      const app = Vue.createApp({
        

        template: `
                    <common-item />
                    <async-common-item />
                `,
      });

      app.component("common-item", {
        template: ` 
              <div>hello world</div>
        `,
      });

      app.component("async-common-item", Vue.defineAsyncComponent(() => {
          return new Promise((resolve,reject) => {
              setTimeout(() => {
                    resolve({
                        template:` <div>this is an async component</div>`
                    })
              }, 3000);
          })
      }));

      const vm = app.mount("#root");
    </script>
  </body>
</html>
